<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // cookie的缺点
    // 1.  cookie可能被禁用
    // 2.  cookie不能跨浏览器 / 不能跨网站
    // 3.  cookie可能被删除
    // 4.  cookie安全性不够高
    // 5.  在浏览器向服务器发送请求时  cookie会随着请求(请求可以携带一定的数据)一同发送给服务器, 会影响请求和响应的速率  
    // 6.  cookie 存储大小之后 4k ,  cookie的存储条数 一般为50条


    // H5新增数据存储方式 webStorage
    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

    // WebStorage两个主要目标：

    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (webStorage也可以跨页面访问 同服务器下)
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

    // 如何使用localStorage 和 sessionStorage?
    // 前提 在服务器环境下允许

    // localStorage 和 sessionStorage  => window (全局对象)
    // 查看 控制台 打印
    //     application  => storage -> localStorage 和 sessionStorage

    // localStorage 和 sessionStorage 属性和方法
    // 属性 
    // length  返回存储数据的数量 

    // 方法  数据的增删改查
    // setItem(key,val);   对应键名存储数据 (键值只能是字符串类型 存储其他类型会被转化为字符串 存数组和对象 JSON.stringify()  JSON.parse())
    // getItem(key);       对应键名获取/修改
    // removeItem(key);    对应键名删除
    // clear()             清除所有数据


  /*   sessionStorage.setItem("user","a123123")
    sessionStorage.setItem("pwd","123123")
    sessionStorage.setItem("phone","17386141517")
    sessionStorage.setItem("email","17386@qq.com")
    sessionStorage.setItem("arr",[1,2,3])

    console.log(sessionStorage.getItem("user"));
    console.log(sessionStorage.getItem("pwd"));
    console.log(sessionStorage.getItem("phone"));
    console.log(sessionStorage.getItem("email"));

    // sessionStorage.removeItem("user")
    // sessionStorage.removeItem("pwd")
    // sessionStorage.removeItem("phone")
    // sessionStorage.removeItem("email")
    
    // sessionStorage.clear();  

    
    console.log(sessionStorage); */



</script>
</html>